<template>
  <div>
    <a-modal
      title="设备记录删除"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width="600"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-model-item label="时间范围选择" prop="dates">
          <a-range-picker
            v-model="formData.dates"
            :show-time="{
              defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
            }"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            :disabled-date="disabledDate"
            style="width: 100%"
          />
        </a-form-model-item>
        <a-form-model-item label="设备" prop="ip">
          <a-select v-model="formData.ip" placeholder="请选择设备">
            <a-select-option v-for="(item, index) in controlList" :key="index" :value="item.control_ip"
              >{{ item.control_name }}-{{ item.control_ip }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
import { delInoutrecordMachineApi, getControlSelectListApi } from '@/api/attendance'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      formData: {
        dates: [],
        ip: '',
      },
      rules: {
        dates: [{ required: true, message: '请选择时间范围', trigger: 'change' }],
        ip: [{ required: true, message: '请选择设备', trigger: 'change' }],
      },
      controlList: [],
    }
  },
  created() {
    this.getControlSelectList()
  },
  methods: {
    moment,
    edit() {
      this.resetFormData()
      this.visible = true
    },
    resetFormData() {
      this.formData.dates = []
      this.ip = ''
    },
    disabledDate(current) {
      // 不可选未来时间
      return current && current > Date.now()
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true
          const {ip, dates} = this.formData
          let formData = {
            ip,
            start_time: dates[0],
            end_time: dates[1]
          }
          const { statusCode, data, errors } = await delInoutrecordMachineApi(formData)
          this.confirmLoading = false
          if (statusCode == 200) {
            this.visible = false
            this.$message.success('操作成功！')
            this.$parent.getTableData()
          } else {
            this.$message.error(errors)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 获取设备下拉列表
    async getControlSelectList() {
      const { data } = await getControlSelectListApi()
      this.controlList = data
    },
  },
}
</script>
        
<style lang="scss" scoped>
</style>